<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>在线生成</title>
		<link rel="stylesheet" type="text/css" href="../css/vue.css"/>
		<link rel="stylesheet" type="text/css" href="../css/common.css"/>
		<link rel="stylesheet" type="text/css" href="../css/myProject.css"/>
		<style>
			.short .el-input__inner{
				width: 118px !important;
			}
			.el-button{
				height: 35px;
				width: 110px;
				background-color: #fff;
				border: 1px solid #32C37C;
				font-size: 14px;
				color: #32C37C;
				text-align: center;
				float: left;
			}
			.el-button:hover{
				color: #fff;
				background-color: #32C37C;
				border: 1px solid #32C37C;
			}
			.materialLibrary .libraryForm .inputGroup span{
				line-height: initial;
				float: initial;
			}
		</style>
	</head>
	<body>
		<!--公共头部 start-->
		<div class="commonHead">
			<div class="commonHeadLeft">
				<a href="javascript:void(0);"><img src="../img/indexLogo.png" class="houseLogo"/></a>
			</div>
			<div class="commonHeadCenter">
				<ul>
					<li>
						<a class="active">项目圈</a>
					</li>
					<li>
						<a>材料数据库</a>
					</li>
					<li>
						<a>计算工具</a>
					</li>
					<li class="clear"></li>
				</ul>
			</div>
			<div class="commonHeadRight">
				<div class="infoCenter">
					<a href="javascript:void(0);">
						<span class="iconfont-tcl">&#xe643;</span>
						<span class="infoCenterText">消息中心</span>
						<span class="remindCircle"></span>
					</a>
				</div>
				<div class="loginInfo">
					<el-dropdown trigger="click">
						<span class="el-dropdown-link">
						    Kdd<i class="el-icon-caret-bottom el-icon--right"></i>
						</span>
						<el-dropdown-menu slot="dropdown">
						    <el-dropdown-item>账号设置</el-dropdown-item>
						    <el-dropdown-item>退出</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</div>
				<div class="clear"></div>
			</div>
			<div class="clear"></div>
		</div>
		<!--公共头部 end-->
		
		<!--公共侧边栏 start-->
		<div class="commonSide">
			<div class="sideTitle">项目圈</div>
			<ul class="sideMenu">
				<li>
					<a href="javascript:void(0);">
						<span class="iconfont">&#xe611;</span>
						<span>我的项目</span>
					</a>
				</li>
				<li class="active">
					<a href="javascript:void(0);">
						<span class="iconfont">&#xe60e;</span>
						<span>我的材料库</span>
					</a>
				</li>
				<li>
					<a href="javascript:void(0);">
						<span class="iconfont">&#xe610;</span>
						<span>我的收藏</span>
					</a>
				</li>
			</ul>
		</div>
		<!--公共侧边栏 end-->
		
		<!--内容 start-->
		<div class="content">
			<div class="contentTop">
				<a class="contentBack">
					<span class="iconfont">&#xe60a;</span>
					<span class="backText">返回</span>
				</a>
				<span class="contentSever">|</span>
				<div class="contentTitle">我的材料库</div>
				<span class="contentTitleSever">></span>
				<div class="contentSecondTitle">在线生成</div>
				<div class="clear"></div>
			</div>
			
			<!--项目圈内容 start-->
			<div class="materialLibrary">
				<div class="projectBox">

					<div class="stepStatus">
						<div class="step">
							<div class="stepDec active">
								<div class="stepNum"><i class="el-icon-check"></i></div>
								<div class="stepName">基本信息</div>
							</div>
							<div class="stepLine">
								<div class="prepareLine hidden"></div>
								<div class="finishLine"></div>
							</div>
							<div class="clear"></div>
						</div>
						<div class="step">
							<div class="stepDec active">
								<div class="stepNum"><i class="el-icon-check"></i></div>
								<div class="stepName">实验数据</div>
							</div>
							<div class="stepLine">
								<div class="prepareLine hidden"></div>
								<div class="finishLine"></div>	
							</div>
							<div class="clear"></div>
						</div>
						<div class="step">
							<div class="stepDec">
								<div class="stepNum">3</div>
								<div class="stepName">特性参数</div>
							</div>
							<div class="clear"></div>
						</div>
						<div class="clear"></div>
					</div>
				</div>
				
				<div class="projectBox">
					<div class="libraryForm">
						<div class="inputGroup">
							<label>材料类型</label>
							<template>
								<el-select placeholder="请选择类型" v-model="buildingType">
								    <el-option
								      v-for="buildingType in buildingTypes"
								      :label="buildingType.label"
								      :value="buildingType.value"
								      :key="buildingType">
								    </el-option>
								</el-select>
							</template>
						</div>
						<div class="inputGroup">
							<label>产品名称</label>
							<input type="text" class="input" :class="{showError: proNameVal}" v-model="proName" @blur="proNameValRight(proName)"/>
							<div class="clear"></div>
						</div>
						<div class="inputGroup">
							<label>品牌</label>
							<input type="text" class="input" :class="{showError: brandVal}" v-model="brand" @blur="brandValRight(brand)"/>
							<div class="clear"></div>
						</div>
						<div class="inputGroup">
							<label>型号</label>
							<input type="text" class="input" :class="{showError: modelVal}" v-model="model" @blur="modelValRight(proName)"/>
							<div class="clear"></div>
						</div>
						<div class="inputGroup">
							<label>材料类别</label>
							<template>
								<el-select placeholder="请选择类型" v-model="buildingType1" class="short">
								    <el-option
								      v-for="buildingType in buildingTypes1"
								      :label="buildingType.label"
								      :value="buildingType.value"
								      :key="buildingType">
								    </el-option>
								</el-select>
							</template>
							<template>
								<el-select placeholder="请选择类型" v-model="buildingType2" class="short">
								    <el-option
								      v-for="buildingType in buildingTypes2"
								      :label="buildingType.label"
								      :value="buildingType.value"
								      :key="buildingType">
								    </el-option>
								</el-select>
							</template>
						</div>
						<div class="inputGroup">
							<label>样品图片</label>
							<!--<input type="text" class="input"/>-->
							<el-upload
							  	class="upload-demo"
							  	action="https://jsonplaceholder.typicode.com/posts/"
							  	:on-preview="handlePreview"
							  	:on-remove="handleRemove"
							  	:file-list="fileList2"
							  	list-type="picture">
							  <el-button size="small" type="primary">点击上传</el-button>
							  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
							</el-upload>
							<div class="clear"></div>
						</div>
						<div class="inputGroup">
							<label>规格</label>
							<input type="text" class="input" :class="{showError: specificationsVal}" v-model="specifications" @blur="specificationsValRight(proName)"/>
							<div class="clear"></div>
						</div>
						<div class="inputGroup">
							<label>生产商</label>
							<input type="text" class="input" :class="{showError: manufacturerVal}" v-model="manufacturer" @blur="manufacturerValRight(proName)"/>
							<div class="clear"></div>
						</div>
						<div class="inputGroup">
							<label>生产日期</label>
							<template>
								<div class="block">
								    <el-date-picker
								      v-model="receiveDate"
								      type="date"
								      placeholder="选择日期"
								      :picker-options="pickerOptions1">
								    </el-date-picker>
								</div>
							</template>
							<div class="clear"></div>
						</div>
						<div class="inputGroup">
							<label>样品来源</label>
							<template>
								<el-select placeholder="请选择类型" v-model="buildingType3">
								    <el-option
								      v-for="buildingType in buildingTypes3"
								      :label="buildingType.label"
								      :value="buildingType.value"
								      :key="buildingType">
								    </el-option>
								</el-select>
							</template>
						</div>
						<div class="inputGroup" v-show="buildingType3 == '选项2'">
							<label>工程名称</label>
							<input type="text" class="input"/>
							<div class="clear"></div>
						</div>
						<div class="inputGroup" v-show="buildingType3 == '选项3' || buildingType3 == '选项4'">
							<label>委托单位</label>
							<input type="text" class="input"/>
							<div class="clear"></div>
						</div>
						<div class="inputGroup" v-show="buildingType3 == '选项1'">
							<label>购买商家</label>
							<input type="text" class="input"/>
							<div class="clear"></div>
						</div>
						<div class="dataForm">
							<div class="wid100 tac mt30 mb30">
								<button class="greenLargerBtn" @click="nextTips">下一步</button>
							</div>
						</div>
					</div>
				</div>
			
				
			</div>
			<!--项目圈内容 end-->
		</div>
		<!--内容 end-->
		
	</body>
	<script type="text/javascript" src="../js/jquery.min.js"></script>
	<script type="text/javascript" src="../js/vue.js"></script>
	<script type="text/javascript" src="../js/vueComponent.js"></script>
	<script type="text/javascript" src="../js/component.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			//获取content最小高度
			var contentMinHeight = $(window).innerHeight() - 60;
			$('.content').css('min-height',contentMinHeight + 'px');
			//获取content宽度
			var contentWidth = $(window).innerWidth() - 180;
			$('.content').css('width',contentWidth + 'px');
			
			//添加和删除控制
			$('.addLine').click(function(){
				var liText = "<li class='dataFormContent'><div class='source'><input type='text'></div><div class='time'><input type='text'></div><div class='concentration'><input type='text'></div><div class='control'><a href='javascript:void(0);' class='delete'>删除</a></div><div class='clear'></div></li>";
				$('.dataForm ul').append(liText);
			});
			//删除
			$(document).on('click','.delete',function(){
				console.log(1);
				$(this).closest('.dataFormContent').remove();
			});
			
		});
		
		
		//实例化自定义组件库中的FormDataCheck对象;
		var FormDataCheck = new FormDataCheck();
		
		var loginInfo = new Vue({
			el:'.loginInfo'
		});
		 
		var projectCircleIndex = new Vue({
			el:'.materialLibrary',
			data:function(){
				return{
					//产品名称
					proName:'',
					proNameVal:false,
					//品牌
					brand:'',
					brandVal:false,
					//型号
					model:'',
					modelVal:false,
					//规格
					specifications:'',
					specificationsVal:false,
					//生产商
					manufacturer:'',
					manufacturerVal:false,
					//
					fileList2: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}],
					testDate:'',
					buildingTypes: [{
			          value: '选项1',
			          label: 'A型'
			        }, {
			          value: '选项2',
			          label: 'B型'
			        }, {
			          value: '选项3',
			          label: 'C型'
			        }, {
			          value: '选项4',
			          label: 'D型'
			        }],
			        buildingType:'',
			        buildingTypes1: [{
			          value: '选项1',
			          label: 'A型'
			        }, {
			          value: '选项2',
			          label: 'B型'
			        }, {
			          value: '选项3',
			          label: 'C型'
			        }, {
			          value: '选项4',
			          label: 'D型'
			        }],
			        buildingType1:'',
			        buildingTypes2: [{
			          value: '选项1',
			          label: 'A型'
			        }, {
			          value: '选项2',
			          label: 'B型'
			        }, {
			          value: '选项3',
			          label: 'C型'
			        }, {
			          value: '选项4',
			          label: 'D型'
			        }],
			        buildingType2:'',
			        buildingTypes3: [{
			          value: '选项1',
			          label: '自购送检'
			        }, {
			          value: '选项2',
			          label: '工程抽检'
			        }, {
			          value: '选项3',
			          label: '厂家送检'
			        }, {
			          value: '选项4',
			          label: '甲方送检'
			        }],
			        buildingType3:'',
			        receiveDate:'',
			       	pickerOptions1: {
			          	/*disabledDate(time) {
			            	return time.getTime() < Date.now() - 8.64e7;
			          	}*/
			        },
				}
			},
			methods:{
				handleRemove(file, fileList) {
			        console.log(file, fileList);
			    },
			    handlePreview(file) {
			        console.log(file);
			    },
			    //检测产品名称
			    proNameValRight(val){
			    	console.log(val);
			    	var self = this;
			    	console.log(FormDataCheck.NoBlankAndSpace(val));
			    	if(!FormDataCheck.NoBlankAndSpace(val)){
			    		self.proNameVal = true;
						self.$message.error('数据不能为空！');
					}else{
						self.proNameVal = false;
					}
					return FormDataCheck.NoBlankAndSpace(val);
			    },
			    //检测品牌
			    brandValRight(val){
			    	var self = this;
			    	console.log(FormDataCheck.NoBlankAndSpace(val));
			    	
			    	if(!FormDataCheck.NoBlankAndSpace(val)){
			    		self.brandVal = true;
						self.$message.error('数据不能为空！');
					}else{
						self.brandVal = false;
					}
					return FormDataCheck.NoBlankAndSpace(val);
			    },
			    //检测型号
			    modelValRight(val){
			    	var self = this;
			    	console.log(FormDataCheck.NoBlankAndSpace(val));
			    	
			    	if(!FormDataCheck.NoBlankAndSpace(val)){
			    		self.modelVal = true;
						self.$message.error('数据不能为空！');
					}else{
						self.modelVal = false;
					}
					return FormDataCheck.NoBlankAndSpace(val);
			    },
			    //检测规格
			    specificationsValRight(val){
			    	var self = this;
			    	console.log(FormDataCheck.NoBlankAndSpace(val));
			    	if(!FormDataCheck.NoBlankAndSpace(val)){
			    		self.specificationsVal = true;
						self.$message.error('数据不能为空！');
					}else{
						self.specificationsVal = false;
					}
					return FormDataCheck.NoBlankAndSpace(val);
			    },
			    //生产商
			    manufacturerValRight(val){
			    	var self = this;
			    	console.log(FormDataCheck.NoBlankAndSpace(val));
			    	
			    	if(!FormDataCheck.NoBlankAndSpace(val)){
			    		self.manufacturerVal = true;
						self.$message.error('数据不能为空！');
					}else{
						self.manufacturerVal = false;
					}
					return FormDataCheck.NoBlankAndSpace(val);
			    },
			    nextTips(){
			    	
			    }
			}
		});
	</script>
</html>
